
let myAudio = document.getElementById('my_audio');
let playButton = document.getElementById('play');

function togglePlayPause() {
  if (myAudio.paused || myAudio.ended) {
    playButton.title = '暂停';
    playButton.innerHTML = '<span class="iconfont icon-pause"></span>';
    myAudio.play();
  } else {
    playButton.title = '播放';
    playButton.innerHTML = '<span class="iconfont icon-caret-right"></span>';
    myAudio.pause();
  }
}
let modal = document.getElementById('modal');
function getLyric() {
  modal.style.display = 'block';
}
function closeLyric() {
  modal.style.display = 'none';
}
let volumeInput = document.getElementById('volume');
function setVolume() {
  myAudio.volume = volume.value;
}
volumeInput.addEventListener('mouseout', function () {
  volumeInput.style.display = 'none';
});
let volumeButton = document.getElementById('volume_button');
volumeButton.addEventListener('mouseover', function () {
  volumeInput.style.display = 'block';
});
volumeButton.addEventListener('mouseout', function () {
  volumeInput.style.display = 'none';
});
let musicProgressLine = document.querySelector('.music-progress-line');
let currentTime = document.querySelector('.current-time');
let time = document.querySelector('.time');

function updateTime() {
  time.innerText = formatTime(myAudio.duration);
  currentTime.innerText = formatTime(myAudio.currentTime);
}

function formatTime(time) {
  let minutes = Math.floor(time / 60).toString().padStart(2, '0');
  let seconds = Math.floor(time % 60).toString().padStart(2, '0');
  return minutes + ':' + seconds;
}

function updateSlider() {
  musicProgressLine.style.width = (myAudio.currentTime / myAudio.duration) * 100 + '%';
}

myAudio.addEventListener('timeupdate', function () {
  updateTime();
  updateSlider();
});